<template>
    <view class="container">

        <view class="avatar">
            <span>微信头像：</span>
            <!-- 上传组件 -->
            <u-upload ref="product_img" name="product_img" :maxCount="1" :fileList="filelist" width="100"
                height="100" />
        </view>

        <view class="content">
            <u-form labelPosition="left" labelWidth="60" :model="strplist" ref="product">
                <u-form-item label="微信昵称">
                    <u-input v-model="strplist.nickname" placeholder="请输入客户昵称" />
                </u-form-item>
                <u-form-item label="真实姓名">
                    <u-input v-model="strplist.realnickname" placeholder="请输入真实姓名" />
                </u-form-item>

                <u-form-item label="电话">
                    <u-input v-model="strplist.mobile" placeholder="请输入客户电话" />

                </u-form-item>

                <u-form-item label="申请原因" prop="description" borderBottom>
                    <u-textarea placeholder="不低于3个字" v-model="strplist.content" count></u-textarea>
                </u-form-item>


                <!-- 全款 -->
                <u-form-item label="身份证" prop="sfz">
                    <u-input v-model="strplist.idcard" placeholder="身份证为空" />
                </u-form-item>



                <view class="avatar">
                    <!-- 上传组件 -->
                    <span>身份证正反面：</span>
                    <u-upload ref="product_img" name="product_img" :maxCount="2" :fileList="filelist1" width="120"
                        height="120" @delete="del" @afterRead="read" />
                </view>







                <!-- 提交按钮 -->
                <u-button text="提交申请" icon="pushpin" size="small" type="primary" :customStyle="btnStyle"
                    @click="product" />


            </u-form>
        </view>



        <!-- 消息提醒 -->
        <u-toast ref="notice"></u-toast>
    </view>
</template>

<script>
export default {
    onLoad() {

        // this.user =uni.getStorageSync('userInfo')

    },
    onShow() {
        this.userheadnickname = uni.getStorageSync("userInfo") ? uni.getStorageSync("userInfo") : {}
        this.filelist = [
            {
                url: this.userheadnickname.userhead_text ? this.userheadnickname.userhead_text : ""
            }
        ]

        this.strplist.nickname = this.userheadnickname.nickname ? this.userheadnickname.nickname : "暂时未知"

        this.strplist.avatar = this.userheadnickname.userhead_text ? this.userheadnickname.userhead_text : ""
    },


    data() {
        return {
            user: {},
            userheadnickname: {},
            piclist: [],
            newthumbArr: [],
            filelist: [],
            filelist1: [],

            supid: 0,
            strplist: {
                nickname: "",
                avatar: "",
                realnickname: "",
                mobile: "",
                idcard: "",
                content: "",
                thumb: "",
                newthumbArr:[]
                

            },

        };
    },

    methods: {
        del(e) {
            this.filelist1.map(async (item, index) => {
                // this.filelist(index, 1)

                if (index == e.index) {
                    // 删除数组中的某一项

                    let data = {
                        busid: this.user.id,
                        product_img: e.file.url,
                    };

                    var result = await this.$u.api.depot.delthumb(data);

                    if (result.code) {
                        this.$refs.notice.show({
                            type: "success",
                            message: result.msg,
                            duration: 1200,
                            complete: () => {
                                this.filelist1.splice(e.index, index);


                                // 图片还剩余一张的时候清空
                                if (index == 0 && e.index == 0) {
                                    this.filelist1 = [];
                                }
                            },
                        });
                    } else {
                        this.$refs.notice.show({
                            type: "error",
                            message: result.msg,
                            duration: 1200,
                        });
                    }
                }
            });
        },

        async read(event) {
            //组装上传数据
            var data = {
                filePath: event.file.thumb,
                name: "product_img",
                header: {},
                formData: {
                    supid: this.hireid,
                },
            };

            //调用接口
            var result = await this.$u.api.depot.thumbs(data);

            if (result.code) {
                // 合并对象
                this.filelist1 = this.filelist1.concat({ url: result.data });

                //修改本地存储中的图像内容
                this.strplist.thumb = result.data;

                let userArray = Object.entries(this.filelist1).map(([key, value]) => {
                    return { value };
                });

                userArray.forEach((item) => {
                    // 截取想要部分路径
                    this.piclist.push(item.value.url);
                });

                // 数组的去重
                let qcarr = [...new Set(this.piclist)];

                // 数组转化成字符串
                this.strplist.thumb = qcarr.join(",");


            } else {
                this.$refs.notice.show({
                    type: "error",
                    message: result.msg,
                });
                return false;
            }
        },

        async product() {

            let data = this.strplist
            data.busid = this.user.id
            data.newthumbArr =this.newthumbArr




            let result = await this.$u.api.depot.sendstore(data);
           

            if (result.code) {
                this.$refs.notice.show({
                    type: "success",
                    message: result.msg,
                    duration: 1000,
                    complete: () => {

                        //返回上一个界面
                        uni.$u.route({
                            type: 'navigateBack',
                            delta: 1
                        })
                    },
                });
            } else {
                this.$refs.notice.show({
                    type: "error",
                    message: result.msg,
                    duration: 2000,
                });
            }

        },



    },
};
</script>

<style>
.content {
    padding: 20px;
}

.container {
    height: 100%;
    margin: 0 50rpx;
    box-sizing: border-box;
}

.avatar {
    text-align: center;
}

.u-avatar {
    margin: 80rpx auto 40rpx;
}

.xcx {
    width: 200rpx;
    height: 200rpx;
    margin: 80rpx auto 40rpx;
    border-radius: 100%;
    overflow: hidden;
}

.nickname {
    font-size: 14px;
    text-align: center;
}

.title {
    text-align: center;
    margin: 40rpx 0;
    font-size: 14rpx;
}

.avatar .u-upload {
    justify-content: center;
    align-items: center;
    margin: 3em auto;
}

/* .u-form-item__body__left__content__label.data-v-5e7216f1 {
      width: 75px;
  } */

.vedio .u-upload {
    justify-content: center;
    align-items: center;
    margin: 0.3em auto;
}

.vedio {
    text-align: center;
}

.u-vedio {
    margin: 80rpx auto 40rpx;
}

.branktypename {
    text-align: center;
}
</style>